<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html,body{
            background-color: #282828;
        }
        #wrap{
            background-color: #282828;
            padding: 0 1em;
        }
        #main{
            padding: 0;
            position: relative;
        }
        /*box_middle*/
        #main .box_middle{
            position: absolute;
            height: 74%;
            top: 26%;
            width: 100%;
            background-color: #282828;
            z-index: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            /*overflow: scroll;*/
        }
        #main .box_middle_top{
            padding: 0 1em;
        }
        #main .box_middle_title{
            
        }
        #main .box_middle_title span{
            color: #FFC600;
            height: 46px;
            line-height: 46px;
        }
        #main .box_middle_bottom{
            padding: 0 1em;
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            padding-bottom: 70px;
        }
            /*影院场次*/
            .box_middle_list{
                margin-top: 4px;
                /*overflow: scroll;*/
                -webkit-box-flex: 1; 
                -webkit-flex: 1;
                flex: 1;
                width: 100%;
            }
            .box_middle_li{
                height: 70px;
                width: 100%;
                background-color: #373737;
                margin: 1px auto;
                display: -webkit-box;
                -webkit-box-orient:horizontal;
                /*display: -webkit-flex;
                display: flex;*/
                position: relative;
            }
            .box_middle_li span{
                color: #9B9B9B;
                font-size: 12px;
            }
            .box_middle_li .li_div{
                /*float: left;*/
                display: table-cell;
                text-align: center;
                color: #9B9B9B;
                height: 100%;
            }
            .box_middle_li .li_1{
                /*width: 70px;*/
                width: 3em;
                line-height: 70px;
                color: #FFF;
                font-size: 1.4em;
            }
            .box_middle_li .li_2{
                width: 25px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            .box_middle_li .li_3{
                /*width: 70px;*/
                width: 3.5em;
                line-height: 70px;
            }
            .box_middle_li .li_4{
                width: 25px;
            }
            .box_middle_li .li_4 .now{
                color: #FFC600;
                position: relative;
                top: 4px;
            }
            .box_middle_li .li_4 .before{
                text-decoration: line-through;
            }
            .box_middle_li .li_5{
                /*width: 70px;*/
                line-height: 70px;
                /*display: block;*/
                -webkit-box-flex: 1; 
                /*-webkit-flex: 1;
                flex: 1;*/
                position: absolute;
                right: 1em;
            }
            .box_middle_li .li_5 .li_btn{
                /*width: 70px;*/
                width: 4.5em;
                height: 34px;
                line-height: 34px;
                background-color: #FFC600;
                /*position: relative;*/
                /*left: 1em;*/
            }
            .box_middle_li .li_5 .li_btn:active{
                background-color: #C5A123;
            }

    </style>
</head>
<body ontouchstart="">
    <div id="wrap">
        <div class="box_middle_bottom">
            <ul class="box_middle_list">
                <li class="box_middle_li">
                    <div class="li_1 li_div">15:00</div>
                    <div class="li_2 li_div">
                        <span>英语 3D</span>
                    </div>
                    <div class="li_3 li_div">1号厅</div>
                    <div class="li_4 li_div">
                        <span class="now">
                            ￥45
                            <span class="before">
                                ￥50
                            </span>
                        </span>

                    </div>
                    <div class="li_5 li_div">
                        <a class="li_btn">
                            选座购票
                        </a>
                    </div>
                </li>
                <li class="box_middle_li">
                    <div class="li_1 li_div">15:00</div>
                    <div class="li_2 li_div">
                        <span>英语 3D</span>
                    </div>
                    <div class="li_3 li_div">1号厅</div>
                    <div class="li_4 li_div">
                        <span class="now">
                            ￥45
                            <span class="before">
                                ￥50
                            </span>
                        </span>

                    </div>
                    <div class="li_5 li_div">
                        <a class="li_btn">
                            选座购票
                        </a>
                    </div>
                </li>
                <li class="box_middle_li">
                    <div class="li_1 li_div">15:00</div>
                    <div class="li_2 li_div">
                        <span>英语 3D</span>
                    </div>
                    <div class="li_3 li_div">1号厅</div>
                    <div class="li_4 li_div">
                        <span class="now">
                            ￥45
                            <span class="before">
                                ￥50
                            </span>
                        </span>

                    </div>
                    <div class="li_5 li_div">
                        <a class="li_btn">
                            选座购票
                        </a>
                    </div>
                </li>
                <li class="box_middle_li">
                    <div class="li_1 li_div">20:00</div>
                    <div class="li_2 li_div">
                        <span>英语 3D</span>
                    </div>
                    <div class="li_3 li_div">1号厅</div>
                    <div class="li_4 li_div">
                        <span class="now">
                            ￥45
                            <span class="before">
                                ￥50
                            </span>
                        </span>

                    </div>
                    <div class="li_5 li_div">
                        <a class="li_btn">
                            选座购票
                        </a>
                    </div>
                </li>
                <li class="box_middle_li">
                    <div class="li_1 li_div">20:00</div>
                    <div class="li_2 li_div">
                        <span>英语 3D</span>
                    </div>
                    <div class="li_3 li_div">1号厅</div>
                    <div class="li_4 li_div">
                        <span class="now">
                            ￥45
                            <span class="before">
                                ￥50
                            </span>
                        </span>

                    </div>
                    <div class="li_5 li_div">
                        <a class="li_btn">
                            选座购票
                        </a>
                    </div>
                </li>
                <li class="box_middle_li">
                    <div class="li_1 li_div">20:00</div>
                    <div class="li_2 li_div">
                        <span>英语 3D</span>
                    </div>
                    <div class="li_3 li_div">1号厅</div>
                    <div class="li_4 li_div">
                        <span class="now">
                            ￥45
                            <span class="before">
                                ￥50
                            </span>
                        </span>

                    </div>
                    <div class="li_5 li_div">
                        <a class="li_btn">
                            选座购票
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">

    apiready = function(){
    };
</script>
</html>